<template>
    <div class="dc_datakb">
        <main-title>
            <div slot="topTitle">营销数据分析</div>
        </main-title>
        <div class="main">
            <div class="leftView bg_fenxi">
                <!-- 回款分析(万元) -->
                <div class="received_analysis">
                    <div class="contentView">
                        <div class="title">回款分析<span class="unit">(万元)</span></div>
                        <div class="tabCon">
                            <div @click="onTab('')" class="tab" :class="activeTab === '' ? 'activeTab':''">全部</div>
                            <div v-for="(item,index) in tabList" :key="index" @click="onTab(item.id)" class="tab" :class="activeTab === item.id ? 'activeTab':''">{{item.name}}</div>
                            <!-- <div @click="onTab(2)" class="tab" :class="activeTab === 2 ? 'activeTab':''">二期</div>
                            <div @click="onTab(3)" class="tab" :class="activeTab === 3 ? 'activeTab':''">三期</div> -->
                        </div>
                    </div>
                    <div class="receivedData">
                      <bar-charts slot="main" v-model="receivedData" :chartStyle="'min-height:314px;height: 314px;'" :option="shopPickOption"></bar-charts>
                      <!-- <bar-charts v-model="receivedData" :chartStyle="'width: 100%;mib-height:314px;'" :option="receivedOption"></bar-charts> -->
                    </div>
                </div>
                <!-- 首付未回款 -->
                <div class="not_received">
                    <h2>首付未回款</h2>
                    <div class="list">
                        <div class="item">
                            <div class="circle">
                                <i-count-up :startVal="startVal" :endVal="payments.day" :decimals="decimals" :duration="duration" :options="options" />
                                <i>套</i>
                            </div>
                            <p>30天</p>
                        </div>
                        <div class="item">
                            <div class="circle">
                                <i-count-up :startVal="startVal" :endVal="payments.year" :decimals="decimals" :duration="duration" :options="options" />
                                <i>套</i>
                            </div>
                            <p>一年内</p>
                        </div>
                        <div class="item">
                            <div class="circle">
                                <i-count-up :startVal="startVal" :endVal="payments.moreYear" :decimals="decimals" :duration="duration" :options="options" />
                                <i>套</i>
                            </div>
                            <p>一年以上</p>
                        </div>
                    </div>
                </div>
                <!-- 全款未回款 -->
                <div class="not_received">
                    <h2>全款未回款</h2>
                    <div class="list">
                        <div class="item">
                            <div class="circle">
                                <i-count-up :startVal="startVal" :endVal="fullPayments.day" :decimals="decimals" :duration="duration" :options="options" />
                                <i>套</i>
                            </div>
                            <p>30天</p>
                        </div>
                        <div class="item">
                            <div class="circle">
                                <i-count-up :startVal="startVal" :endVal="fullPayments.year" :decimals="decimals" :duration="duration" :options="options" />
                                <i>套</i>
                            </div>
                            <p>一年内</p>
                        </div>
                        <div class="item">
                            <div class="circle">
                                <i-count-up :startVal="startVal" :endVal="fullPayments.moreYear" :decimals="decimals" :duration="duration" :options="options" />
                                <i>套</i>
                            </div>
                            <p>一年以上</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cenView">
                <!-- 成交量 交易额 -->
                <div class="top">
                    <div class="flexBox">
                        <div class="item">
                            <div class="title leftColor">
                                <img src="../../../../../../static/img/dc/news/yingxiao_chengjiao_1.png" alt="">
                                成交量
                            </div>
                            <div class="rowBox">
                                <div class="myRow">
                                    <div>本月<span class="num leftColor">{{realEstateMarketingData.currentMonthCount}}</span>套</div>
                                    <div>
                                      同比
                                      <img v-if="realEstateMarketingData.currentMonthCountRatio>0" src="../../../../../../static/img/dc/news/yingxiao_more.png" alt="">
                                      <img v-else src="../../../../../../static/img/dc/news/yingxiao_less.png" alt="">
                                      {{Math.abs(realEstateMarketingData.currentMonthCountRatio)}}
                                    </div>
                                </div>
                                <div class="myRow">
                                    <div>本年<span class="numL leftColor">{{realEstateMarketingData.currentYearCount}}</span>套</div>
                                    <div>
                                      同比
                                      <img v-if="realEstateMarketingData.currentYearCountRatio>0" src="../../../../../../static/img/dc/news/yingxiao_more.png" alt="">
                                      <img v-else src="../../../../../../static/img/dc/news/yingxiao_less.png" alt="">
                                      {{Math.abs(realEstateMarketingData.currentYearCountRatio)}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="title rightColor">
                                <img src="../../../../../../static/img/dc/news/yingxiao_jiaoyie.png" alt="">
                                交易额
                            </div>
                            <div class="rowBox">
                                <div class="myRow">
                                    <div>本月<span class="num rightColor">{{(realEstateMarketingData.currentMonthDealAmount).toLocaleString()}}</span>万元</div>
                                    <div>
                                      同比
                                      <img v-if="realEstateMarketingData.currentMonthDealAmountRatio>0" src="../../../../../../static/img/dc/news/yingxiao_more.png" alt="">
                                      <img v-else src="../../../../../../static/img/dc/news/yingxiao_less.png" alt="">
                                      {{Math.abs(realEstateMarketingData.currentMonthDealAmountRatio)}}
                                    </div>
                                </div>
                                <div class="myRow">
                                    <div>本年<span class="numL rightColor">{{(realEstateMarketingData.currentYearDealAmount).toLocaleString()}}</span>万元</div>
                                    <div>
                                      同比
                                      <img v-if="realEstateMarketingData.currentYearDealAmountRatio>0" src="../../../../../../static/img/dc/news/yingxiao_more.png" alt="">
                                      <img v-else src="../../../../../../static/img/dc/news/yingxiao_less.png" alt="">
                                      {{Math.abs(realEstateMarketingData.currentYearDealAmountRatio)}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 成交趋势 -->
                <div class="cen">
                  <div class="title">
                    <span class="txt">成交趋势</span>
                    <div class="tabTrend">
                      <div @click="onTab1(27002)" class="tab" :class="trendTab === 27002 ? 'activeTab':''">成交量</div>
                      <div @click="onTab1(27004)" class="tab" :class="trendTab === 27004 ? 'activeTab':''">成交均价</div>
                    </div>
                  </div>
                  <!-- 成交趋势 liness --> 
                  <div class="trendLines">
                      <line-chartss v-model="trendData" :chartStyle="'width:780px;min-height:240px;'" :option="lineChartOption"></line-chartss>
                  </div>
                </div>

                <!-- 表格 -->
                <div class="bot">
                  <div class="table">
                    <div class="tHead">
                      <div class="tItem"></div>
                      <div class="tItem">
                        <img src="../../../../../../static/img/dc/news/yingxiao_yiqianyue.png" alt="">
                        <span>已签约</span>
                      </div>
                      <div class="tItem">
                        <img src="../../../../../../static/img/dc/news/yingxiao_yirengou.png" alt="">
                        <span>已认购</span>
                      </div>
                      <div class="tItem">
                        <img src="../../../../../../static/img/dc/news/yingxiao_yikaipan.png" alt="">
                        <span>已开盘未售</span>
                      </div>
                      <div class="tItem">
                        <img src="../../../../../../static/img/dc/news/yingxiao_weikaipan.png" alt="">
                        <span>未开盘未售</span>
                      </div>
                    </div>
                    <div class="tBody">
                      <div v-for="(item,index) in tableList" :key="index" class="tRow">
                        <div class="tItem">
                          <i class="icon"></i>
                          <span>{{item.name}}</span>
                          </div>
                        <div class="tItem">{{item.contractCount}}</div>
                        <div class="tItem">{{item.subscriptionCount}}</div>
                        <div class="tItem">{{item.alreadyOpenNotSaleCount}}</div>
                        <div class="tItem">{{item.notOpenNotSaleCount}}</div>
                      </div>
                    </div>
                  </div>
                </div>
            </div>

            <div class="rightView bg_fenxi">
                <div class="title">房源存量分析<i>(套)</i></div>
                <!-- 房源存量分析(套) -->
                <div class="analysisData">
                  <pie-chart v-model="projectArr" :chartStyle="'width:100%;min-height:220px;'" :option="stockAnalysisDataOption"></pie-chart>
                </div>

                <!-- 存量项目 -->
                <div class="stock_project">
                  <h2>存量项目</h2>
                  <!-- 存量项目 pie -->
                  <div class="projectData">
                    <pie-chart v-model="stockAnalysisData" :chartStyle="'width:100%;min-height:220px;'" :option="projectOption"></pie-chart>
                  </div>
                </div>

                <!-- 存量楼盘 -->
                <div class="stock_sale">
                  <h2>存量楼盘</h2>
                  <!-- 存量楼盘 bar -->
                  <div class="saleData">
                    <bar-chart v-model="housesArr" :chartStyle="'width:100%;min-height:220px;'" :option="housesOption"></bar-chart>
                  </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import mainTitle from "../../dc/new/components/mainTitle";
import barCharts from "@/components/Charts/barCharts";
import pieChart from "@/components/Charts/pieChart";
import {
  GetDataByTargetForTwo,
  GetRealEstateMarketingData,
  GetProjectList,
  GetDoubleDetailList,
  GetHousingStockAnalysis,
  GetSaleAnalyseStatueList,
  GetDataByDoubleTargetForTwo
} from "@/api/dc/index";

export default {
  components: {
    mainTitle,
    barCharts,
    pieChart,
    GetDataByTargetForTwo
  },
  data() {
    return {
      tableList: [],
      projectArr: [],
      projectOption: {
        grid: {
          width: "auto"
        },
        legend: {
          orient: "vertical",
          top: "20%",
          right: 0
        },
        shadowBlur: "0",
        radius: "70%",
        hidePieMargin: true,
        showLabel: true,
        hoverPosion: "inside",
        labelFormatter: "{c}",
        color: ["#8CC63F", "#29ABE2", "#DB5C35", "#BC9620", "#BDB491"]
      },
      housesArr: [],
      housesOption: {
        dataZoom: [
          {
            start: 0,
            end: 30,
            bottom: 0,
            backgroundColor: "rgba(189, 180, 145, 0.5)",
            fillerColor: "#bc9620",
            borderColor: "transparent"
          }
        ],
        barWidth: 28,
        grid: {
          top: 10,
          left: 0
        },
        color: "#BDB491",
        tooltip: {
          show: false
        },
        label: {
          show: true
        },
        xAxis: {
          axisLine: {
            show: false
          },
          axisLabel: {
            rotate: 0,
            rich: {
              // x轴富文本样式
              value: {
                color: "#BDB491"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: "#BDB491",
        endColor: "#736357"
      },
      stockAnalysisData: [], // 存量分析
      stockAnalysisDataOption: {
        legend: {
          orient: "vertical",
          top: "middle",
          right: 0
        },
        hoverPosion: "inside",
        center: ["52%", "50%"],
        radius: ["50%", "90%"],
        showLine: true,
        showLabel: true,
        title: {},
        color: ["#8CC63F", "#29ABE2", "#DB5C35"]
      },
      trendData: [], // 成交趋势
      lineChartOption: {
        dataZoom: [
          {
            show: false
          }
        ],
        toolTipTxtColor: "#BDB491",
        grid: {
          height: 150,
          top: "8%",
          left: "8%",
          right: "10%",
          bottom: "20%"
        },
        legendColor: "#BDB491",
        legend: {
          bottom: "20%"
        },
        hideLineColor: true,
        showSymbol: "none",
        tooltip: {
          show: true,
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "rgba(253,196,9,0.2)",
              shadowBlur: 10,
              shadowColor: "#FDC409"
            }
          }
        },
        showLabel: false,
        xAxis: {
          z: 10,
          boundaryGap: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            rotate: 0,
            inside: false,
            rich: {
              value: {
                color: "#bdb491"
              }
            }
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(229, 229, 229, 0.1)",
              type: "solid"
            }
          },
          axisLabel: {
            color: "#BDB491"
          }
        },
        color: ["#DB5C35", "#1EC1FF", "#FDC409", "#8CC63F"]
      },
      trendTab: 27002,
      realEstateMarketingData: {
        currentMonthCount: 0,
        currentMonthCountRatio: 0,
        currentYearCount: 0,
        currentYearCountRatio: 0,
        currentMonthDealAmount: 0,
        currentMonthDealAmountRatio: 0,
        currentYearDealAmount: 0,
        currentYearDealAmountRatio: 0
      },
      shopPickOption: {
        color: ["#8CC63F", "#29ABE2"],
        grid: {
          left: 0,
          right: 0,
          bottom: "70px"
        },
        toolTipTxtColor: "#BDB491",
        xAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            show: true,
            rotate: 0
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false,
            rotate: 0
          }
        },
        barWidth: 20,
        labelDefault: 0
      },
      payments: {
        day: 0,
        year: 0,
        moreYear: 0
      },
      fullPayments: {
        day: 0,
        year: 0,
        moreYear: 0
      },
      tabList: [],
      receivedData: [],
      activeTab: "",
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      }
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.feachGetPayments(); // 首付未回款
      this.feachGetFullPayments(); // 全款未回款
      this.GetRealEstateMarketingDataFun(); // 获取地产营销数据看板
      this.getReceivedData(); // 获取回款分析柱状图数据
      this.getTabList(); // 获取期数列表
      this.getTrendData(); // 获取linechartss数据
      this.getStockAnalysisData(); // 获取存量分析数据
      this.getTableList(); // 获取表格数据
    },
    async getTableList() {
      try {
        var res = await GetSaleAnalyseStatueList();
        if (res.data.code === "0") {
          this.$set(this, "tableList", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    async getStockAnalysisData() {
      try {
        var res = await GetHousingStockAnalysis();
        if (res.data.code === "0") {
          this.$set(this, "stockAnalysisData", res.data.result);
          this.$set(this, "projectArr", res.data.result[0].productPeriodList);
          this.$set(this, "housesArr", res.data.result[0].productBuildingList);
        }
      } catch (e) {
        console.log(e);
      }
    },
    async getTrendData() {
      var params = {
        queryType: this.trendTab,
        timeType: "3010",
        timeAccuracy: "4003"
      };
      try {
        var res = await GetDoubleDetailList(params);
        if (res.data.code === "0") {
          if (this.trendTab === 27004) {
            res.data.result.forEach(item => {
              item.list.forEach(aa => {
                aa.value = aa.value.toFixed(2);
              });
            });
          }
          this.$set(this, "trendData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    async getTabList() {
      try {
        var res = await GetProjectList();
        if (res.data.code === "0") {
          this.$set(this, "tabList", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    async getReceivedData() {
      var params = {
        ProjGUID: this.activeTab,
        queryType: "27009"
      };
      try {
        var res = await GetDataByDoubleTargetForTwo(params);
        if (res.data.code === "0") {
          this.$set(this, "receivedData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    async feachGetPayments() {
      var params = {
        queryType: 27010
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          var pa = {
            day: res.data.result.list[0].value,
            year: res.data.result.list[1].value,
            moreYear: res.data.result.list[2].value
          };
          this.$set(this, "payments", pa);
        }
      } catch (e) {
        console.log(e);
      }
    },
    async feachGetFullPayments() {
      var params = {
        queryType: 27011
      };
      try {
        var res = await GetDataByTargetForTwo(params);
        if (res.data.code === "0") {
          var fu = {
            day: res.data.result.list[0].value,
            year: res.data.result.list[1].value,
            moreYear: res.data.result.list[2].value
          };
          this.$set(this, "fullPayments", fu);
        }
      } catch (e) {
        console.log(e);
      }
    },
    async GetRealEstateMarketingDataFun() {
      try {
        var res = await GetRealEstateMarketingData();
        if (res.data.code === "0") {
          this.$set(this, "realEstateMarketingData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    onTab(val) {
      this.$set(this, "activeTab", val);
      this.getReceivedData();
    },
    onTab1(val) {
      this.$set(this, "trendTab", val);
      this.getTrendData();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../../styles/base/_parameters";

.dc_datakb {
  @include absoluteAllSides;
  color: #bdb491;
  .main {
    @include absoluteAllSides(95, 34, 50, 46, 1);
    .bg_fenxi {
      width: 506px;
      height: 955px;
      background: url("../../../../../../static/img/dc/news/yingxiao_fenxi.png")
        left top no-repeat;
      background-size: 100% 100%;
    }
    .leftView {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      .received_analysis {
        width: 487px;
        padding: 0 30px;
        .contentView {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 76px;
          .title {
            font-size: 26px;
            font-weight: bold;
            & span {
              font-size: 18px;
            }
          }
          .tabCon {
            display: flex;
            justify-content: space-between;
            width: 230px;
          }
        }
        .receivedData {
          width: 430px;
          height: 346px;
          border-bottom: 1px solid rgba(#534741, 0.3);
        }
      }
      .not_received {
        padding: 0 30px;
        margin-top: 20px;
        & h2 {
          font-size: 20px;
          font-weight: bold;
        }
        .list {
          display: flex;
          justify-content: space-around;
          .item {
            margin-top: 34px;
            margin-bottom: 43px;
            & .circle {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 112px;
              height: 112px;
              line-height: 1;
              @include din(28px);
              & i {
                font-size: 16px;
                font-weight: initial;
              }
            }
            & p {
              margin-top: 5px;
              font-size: 16px;
              text-align: center;
              line-height: 1;
            }
            &:nth-of-type(1) .circle {
              color: #8cc63f;
              background: url("../../../../../../static/img/dc/news/yingxiao_green.png")
                left top no-repeat;
              background-size: 100% 100%;
            }
            &:nth-of-type(2) .circle {
              color: #bc9620;
              background: url("../../../../../../static/img/dc/news/yingxiao_yellow.png")
                left top no-repeat;
              background-size: 100% 100%;
            }
            &:nth-of-type(3) .circle {
              color: #db5c35;
              background: url("../../../../../../static/img/dc/news/yingxiao_red.png")
                left top no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
    }
    .cenView {
      position: absolute;
      top: 28px;
      left: 524px;
      z-index: 1;
      .top {
        width: 776px;
        height: 196px;
        padding: 20px;
        background-color: rgba(#000, 0.3);
        .flexBox {
          .leftColor {
            color: #db5c35;
          }
          .rightColor {
            color: #bc9620;
          }
          width: 100%;
          position: relative;
          display: flex;
          .item {
            width: 50%;
            &:nth-of-type(1) {
              padding: 5px 30px 5px 10px;
            }
            &:nth-of-type(2) {
              padding: 5px 10px 5px 30px;
            }
            .title {
              line-height: 1;
              font-size: 26px;
              img {
                vertical-align: sub;
                height: 30px;
                width: 30px;
              }
            }
            .rowBox {
              margin-top: 25px;
              .myRow {
                &:nth-of-type(1) {
                  margin-bottom: 10px;
                }
                align-items: baseline;
                line-height: 1;
                display: flex;
                justify-content: space-between;
                img {
                  width: 7px;
                  height: 12px;
                }
                .num {
                  margin: 0px 10px;
                  @include din(40px);
                }
                .numL {
                  margin: 0px 10px;
                  @include din(30px);
                }
              }
            }
          }
        }
        .flexBox::before {
          content: "";
          position: absolute;
          width: 1px;
          height: 130px;
          background: rgba(#534741, 0.3);
          top: 15px;
          left: 50%;
        }
      }
      .cen {
        width: 794px;
        height: 355px;
        margin-top: 30px;
        margin-bottom: 30px;
        background: url("../../../../../../static/img/dc/news/yingxiao_qushi.png")
          left top no-repeat;
        background-size: 100% 100%;
        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 776px;
          height: 66px;
          padding: 0 30px;
          .txt {
            font-size: 26px;
            line-height: 1;
            font-weight: bold;
          }
          .tabTrend {
            display: flex;
          }
        }
        .trendLines {
          width: 710px;
          height: 207px;
          margin-top: 10px;
          margin-left: 30px;
        }
      }
      .bot {
        width: 794px;
        height: 317px;
        padding: 10px 27px;
        background: url("../../../../../../static/img/dc/news/yingxiao_table.png")
          left top no-repeat;
        background-size: 100% 100%;
        .table {
          position: relative;
          width: 100%;
          .tHead {
            display: flex;
            align-items: center;
            height: 40px;
            .tItem {
              display: flex;
              align-items: center;
              width: calc(100% / 4);
              font-size: 18px;
              &:nth-of-type(1) {
                width: 120px;
              }
              img {
                width: 20px;
                height: 20px;
                margin-right: 5px;
              }
            }
          }
          .tBody {
            .tRow {
              display: flex;
              border-top: 1px solid rgba(#e5e5e5, 0.1);
              .tItem {
                display: flex;
                align-items: center;
                width: calc(100% / 4);
                height: 46px;
                margin-left: 35px;
                @include din(20px);
                &:nth-of-type(1) {
                  width: 120px;
                  margin-left: 10px;
                }
                .icon {
                  display: inline-block;
                  width: 16px;
                  height: 16px;
                  margin-right: 5px;
                }
                span {
                  font-size: 16px;
                }
              }
              &:nth-of-type(1) {
                .tItem {
                  color: #29abe2;
                  .icon {
                    background: url("../../../../../../static/img/dc/news/yingxiao_home.png")
                      left top no-repeat;
                    background-size: 100% 100%;
                  }
                }
              }
              &:nth-of-type(2) {
                color: #bc9620;
                .tItem {
                  .icon {
                    background: url("../../../../../../static/img/dc/news/yingxiao_shop.png")
                      left top no-repeat;
                    background-size: 100% 100%;
                  }
                }
              }
              &:nth-of-type(3) {
                color: #db5c35;
                .tItem {
                  .icon {
                    background: url("../../../../../../static/img/dc/news/yingxiao_whereshouse.png")
                      left top no-repeat;
                    background-size: 100% 100%;
                  }
                }
              }
              &:nth-of-type(4) {
                color: #8cc63f;
                .tItem {
                  .icon {
                    background: url("../../../../../../static/img/dc/news/yingxiao_car.png")
                      left top no-repeat;
                    background-size: 100% 100%;
                  }
                }
              }
              &:nth-of-type(5) {
                color: #bdb491;
                .tItem {
                  .icon {
                    background: url("../../../../../../static/img/dc/news/yingxiao_totel.png")
                      left top no-repeat;
                    background-size: 100% 100%;
                  }
                }
              }
            }
          }
          &:after {
            content: "";
            position: absolute;
            top: 5px;
            left: 95px;
            z-index: 1;
            width: 1px;
            height: calc(100% - 10px);
            background-color: rgba(#e5e5e5, 0.1);
          }
        }
      }
    }
    .rightView {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
      .title {
        line-height: 78px;
        padding: 0 30px;
        font-size: 26px;
        font-weight: bold;
        & i {
          font-size: 18px;
        }
      }
      .analysisData {
        width: 430px;
        height: 282px;
        margin-left: 30px;
        margin-bottom: 43px;
        border-bottom: 1px solid rgba(#534741, 0.3);
      }
      .stock_project,
      .stock_sale {
        padding: 0 30px;
        & h2 {
          font-size: 20px;
          font-weight: bold;
        }
        .projectData {
          width: 430px;
          height: 240px;
        }
        .saleData {
          width: 430px;
          height: 210px;
        }
      }
    }
  }
  .tab {
    height: 26px;
    padding: 0 10px;
    font-size: 18px;
    text-align: center;
    border-radius: 13px;
    cursor: pointer;
  }
  .activeTab {
    background-color: #bdb491;
    color: #000;
  }
}
</style>



